<template>
    <div>
        <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :limit="fileLimit"
            :on-success= 'afterLoadSuccess'
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>


<script>
   /**

    * 属性说明
    *  属性名
        @uploadUrl 传入上传的uploadUrl，如果没有传入，默认就是用本地的上传路径
        @fileLimit 传入fileLimit 来重置默认的5条上传限制，
        @maxSize  传入最大图片的大小maxSize，来重置 最大5MB，
        @v-model  进行绑定上传的图片fileList， 可以是一个数组，也可以是一个数组的json字符串
        结构如下： [
                {
                    url: 'http://images.oraro.net/20190606/1559799098982.png'
                },
                {
                    url: 'http://images.oraro.net/20190606/1559799098982.png'
                },
                {
                    url: 'http://images.oraro.net/20190606/1559799098982.png'
                }
              ]
 */
import baseURL from '@/utils/baseURL';
  export default {
      props: {
        value: {
            type: [Array,String],
            default: () => {}
        },
        maxSize: {
            type: Number,
            default: 5
        },
        uploadUrl: {
            type: String,
            default: baseURL.jky + '/fileServer/uploadFile'
        },
        fileLimit: {
            type: Number,
            default: 5
        }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        this.$emit('input', this.getImgList(fileList));
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      getUrl(val) {
          return (val.response&&val.response.data[0]) || val.url;
      },
      getImgList(list) {
          // list 为element默认的 文件list ,我们要拿出传给后台的url数组。
          return list.map(ele => {
              return {
                  url: this.getUrl(ele)
              }
          })
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < this.maxSize;
        if (!isLt2M) {
            this.$message.error(`上传头像图片大小不能超过 ${this.maxSize}MB!`);
        }
        return isLt2M;
      },
      afterLoadSuccess(response, file, fileList) {
        this.fileList = this.getImgList(fileList);
        // 这里的fileList 会被进行转化
        this.$emit('input', this.getImgList(this.fileList));
      },
      initFileList() {
        if(Array.isArray(this.value)) {
            this.fileList = this.getImgList(this.value);
        } else if (typeof this.value === 'string') {
           const list = JSON.parse(this.value);
            this.fileList = this.getImgList(list);
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制上传 ${this.fileLimit} 个文件`);
      },
      beforeRemove(file, fileList) {
          // 这里有一个element的bug，出发上传失败的时候，会回调，删除当前事件。这里做处理。
        if(file.size&&!this.beforeAvatarUpload(file)) {
            return 
        }
        return this.$confirm(`确定移除图片吗？`);
      }
    },
    watch: {
    },
    created() {
        this.initFileList();
    },
    activated() {
        this.initFileList();  
    }
  }
</script>